<template>
  <el-dialog title="答题查看" :close-on-click-modal="false" :destroy-on-close="true" width="800px" :visible.sync="isShow" :before-close="closeBox">
    <!-- 案例背景 -->
    <el-carousel trigger="click" height="500px" :loop="false">
      <el-carousel-item v-for="(item, index) in answers.resourceCaseBgList" :key="index">
        <!-- 纯文本 -->
        <div class="media-box" v-if="item.displayType === '1'">
          <div class="case-con">{{item.resourceCaseContentEn}}</div>
        </div>
        <!-- 图片 -->
        <div class="media-box" v-if="item.displayType === '2'">
          <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
        </div>
        <!-- 音频 -->
        <div class="media-box" v-if="item.displayType === '3'">
          <audio class="audio" controls :src="item.fileUrl"></audio>
        </div>
        <!-- 视频 -->
        <div class="media-box" v-if="item.displayType === '4'">
          <video class="video" controls :src="item.fileUrl">
            <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
          </video>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="case-tip" style="display: flex;line-height: 28px;margin: 10px 0;">
      <div>报告文件</div>
      <div style="width: 500px;padding: 0 30px;text-align: right;font-size: 12px;">{{result.fileName}}</div>
      <el-button type="primary" size="mini">查看</el-button>
    </div>
    <div class="case-tip">
      做题内容
    </div>
    <el-input type="textarea" v-model="result.answer" readonly></el-input>
  </el-dialog>
</template>

<script>
import { showAnswer } from '@/api/teacher/manage/trainingInteractionManage'
export default {
  props: ['resourceCaseId', 'answerItem'],
  data () {
    return {
      isShow: true,
      answers: {
        resourceCaseName: '',
        caseRequestCn: '',
        caseRequestEn: '',
        resourceCaseBgList: [],
        caseGroupId: '',
        caseNodeId: '',
        lessonICaseId: '',
        resourceCaseId: '',
        result: ''
      },
      result: {
        answer: '',
        fileUrl: '',
        fileName: ''
      }
    }
  },
  methods: {
    async showAnswer () {
      const res = await showAnswer({
        caseGroupId: this.answerItem.caseGroupId,
        resourceCaseId: this.resourceCaseId,
        stuAnswerId: this.answerItem.stuAnswerId
      })
      if (res.code === '200') {
        this.answers = res.data
        const result = JSON.parse(this.answers.result)
        this.result = {
          answer: result.answer,
          fileUrl: result.fileUrl,
          fileName: result.fileName
        }
      } else {
        this.$message.error(res.message)
      }
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.showAnswer()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
</style>
